<div id="customizer-div">
	<h3>Header & Footer Texts</h3>
	<hr>
	<form id="text-form" action="#">
		<ul>
			<li>
				<label>Header Title</label>
				<input class="customtext" type="text" name="header_title"
					value="<?php echo $header_title; ?>" />
				<input type="text" id="color1" name="header_title_color"
					class="colorwell" value="<?php echo $header_title_color; ?>" />
			</li>
			<li>
				<label>Header Sub Title</label>
				<input class="customtext" type="text" name="header_sub_title"
					value="<?php echo $header_sub_title; ?>" />
				<input type="text" id="color2" name="header_subtitle_color"
					class="colorwell" value="<?php echo $header_subtitle_color; ?>" />
				
			</li>
			<li>
				<label>Footer Title</label>
				<input class="customtext" name="footer_title" type="text"
					value="<?php echo $footer_title; ?>" />
				<input type="text" id="color4" name="footer_title_color"
					class="colorwell" value="<?php echo $footer_title_color; ?>" />
			</li>
			<li>
				<label>Footer Sub Title</label>
				<input class="customtext" name="footer_sub_title" type="text"
					value="<?php echo $footer_subtitle; ?>" />
				<input type="text" id="color5" name="footer_subtitle_color"
					class="colorwell" value="<?php echo $footer_subtitle_color; ?>" />
				

			</li>
			<li>
				<label>Footer Copyright</label>
				<input class="customtext" name="footer_copyright" type="text"
					value="<?php echo $footer_copyright; ?>" />
				<input type="text" id="color5" name="footer_copyright_color"
					class="colorwell" value="<?php echo $footer_copyright_color; ?>" />
				

			</li>
		</ul>
		<div id="picker" style="float: right; margin-right: 30px;"></div>
		<ul>
			<li>
			<label>	Header Background</label>
				<input type="text" id="color3" name="header_bgcolor"
					class="colorwell" value="<?php echo $header_bgcolor; ?>" />
			</li>
			<li>
			<label>	Footer Background</label>
				<input type="text" id="color7" name="footer_bgcolor"
					name="color7" class="colorwell"
					value="<?php echo $footer_bgcolor; ?>" />
			</li>
			<li>
			<label>	Content Background</label>
				<input type="text" id="color8" name="page_bgcolor"
					class="colorwell" value="<?php echo $page_bgcolor; ?>" />

			</li>
			<li>
				<label>Side Links Background</label>
				<input type="text" id="color9" name="links_bgcolor"
					class="colorwell" value="<?php echo $links_bgcolor; ?>" />
			</li>
			<li>
			<label>	Page Background</label>
				<input type="text" id="color10" name="body_bgcolor"
					class="colorwell" value="<?php echo $body_bgcolor; ?>" />
			</li>
			<li>
			<label>	Side Links Color</label>
				<input type="text" id="color11" name="sidelink_color"
					class="colorwell" value="<?php echo $sidelink_color; ?>" />
			</li>
		</ul>
		<p>
			<button id='textsavebtn' type="submit">Save</button>
	
	</form>
	<hr>
	<h3>Header Icon</h3>
	<hr>
	<div id='images' class='table'>&nbsp;</div>
	<div style="display: inline">
		<b style="padding: 10px;">Selected Image :</b> <input type="text"
			id="imagetext" value="<?php echo $header_icon;?>" disabled="disabled"
			size="50" style="height: 30px; padding: 5px" />
		<button id="activebtn">Make this active</button>
	</div>
	<button id="imageuploadbtn">Upload Image</button>
	</div>
	<div id="dialog-form" title="Upload the site icon.">
		<p class="validateTips">Upload the Icon as an image.Allowed file
			types[jpg,gif,png] only.</p>

		<form id="userfileform" enctype="multipart/formdata"
			action="guiviewloader/do_upload">
			<fieldset>
				<input type="file" name="userfile" id="userfile" size="60"
					class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</form>

	</div>

</div>
	<script type="text/javascript">

	function getImages(){
		   $.getJSON('<?php print base_url(); ?>guicontroller/getimages', function(data) {
			   var text='<ul>';
			   $.each(data,function(key,val){
				   console.log(val);
				   text=text+'<li><img height="50px" width="50px" name="'+val+'" style="border : thin #000 solid;"  src="../uploads/'+val+'"/></li>';
			   });
			   text=text+'</ul>';
			   $('#images').html(text);
		
			   $('img').each(function(){
					$(this).click(function(){

						//reset all the elements background.
						$('img').each(function(){
							$(this).css('background-color','#FFF');
						});				
						
						console.log($(this));
						$(this).css('background-color','#CCC');

						$('#imagetext').val($(this).attr('name'));
					});
			   });
					
		   });

	}

	
$(document).ready(function(){
	    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        }
        f.linkTo(this);
        p.css('opacity', 1);
        $(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });


    getImages();
    
    $( "#dialog-form" ).dialog({
		autoOpen: false,
		height:250,
		width: 700,
		modal: true,
		buttons: {
			"Upload image": function() {

				var paramObj = {};
				console.log($('#userfileform'));

				var data= new FormData();
				jQuery.each($('#userfile')[0].files, function(i, file) {
				    data.append('userfile', file);
				    console.log('file number uploaded :: '+file);
				});

				console.log(data);
				$.ajax({
				    url: '<?php print base_url(); ?>guiviewloader/do_upload',
				    data: data,
				    cache: false,
				    contentType: false,
				    processData: false,
				    type: 'POST',
				    success: function(data123){
				       getImages();
				    }
				});
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			console.log("Dialog closed");
		}
	});

    $( "#imageuploadbtn" )
	.button()
	.click(function() {
		$( "#dialog-form" ).dialog( "open" );
		
	});

	$('#activebtn').button().click(function(){
		console.log($(this));
		var data='&header_icon='+$("#imagetext").val();
		$.ajax({
		    url: '<?php print base_url(); ?>guicontroller/saveimagedata',
		    data: data,
		    type: 'POST',
		    success: function(data){
		       console.log(data);
		    }
		});
	});

	$('#textsavebtn').button().click(function(){
		console.log($(this));
		var data=$('#text-form').serialize();

		$.ajax({
		    url: '<?php print base_url(); ?>guicontroller/savetextdata',
		    data: data,
		    type: 'POST',
		    success: function(data){
		       console.log(data);
		    }
		});
		return false;
	});
	
});

</script>
</body>
</html>
